<template>
  <div class="user">
    <el-card>
      <el-form ref="userFormRef" :model="userForm" inline>
        <el-form-item label="用户昵称" prop="username">
          <el-input v-model="userForm.username"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
          <el-input v-model="userForm.email"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role_id">
          <el-select v-model="userForm.role_id" placeholder="请选择">
            <el-option label="超级管理员" value="1"></el-option>
            <el-option label="管理员" value="2"></el-option>
            <el-option label="老师" value="3"></el-option>
            <el-option label="学生" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="search" type="primary">搜索</el-button>
          <el-button @click="clear" type="default">清除</el-button>
          <el-button @click="add" type="primary">+新增用户</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top:20px;">
      <el-table :data="userList">
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="电话" prop="phone"></el-table-column>
        <el-table-column
          label="邮箱"
          prop="email"
          width="180"
        ></el-table-column>
        <el-table-column label="角色">
          <template slot-scope="scope">
            <div v-if="scope.row.role_id === 1">超级管理员</div>
            <div v-else-if="scope.row.role_id === 2">管理员</div>
            <div v-else-if="scope.row.role_id === 3">老师</div>
            <div v-else-if="scope.row.role_id === 4">学生</div>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.status === 1">启用</div>
            <div style="color:red;" v-else-if="scope.row.status === 0">
              禁用
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)" type="default">编辑</el-button>
            <el-button
              @click="changeStatus(scope.row.id)"
              :type="scope.row.status === 0 ? 'success' : 'info'"
              >{{ scope.row.status === 0 ? '启用' : '禁用' }}</el-button
            >
            <el-button @click="delUser(scope.row.id)" type="default"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页插件 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <user-edit ref="userEditRef" :mode="mode"></user-edit>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { getUserList, changeUserStataus, deleteUser } from '@/api/user'
import UserEdit from './user-add-or-update.vue'
@Component({
  components: {
    UserEdit
  }
})
export default class User extends Vue {
  declare userForm: any
  declare page: number
  declare limit: number
  declare userList: any
  declare total: number
  declare mode: string

  data() {
    return {
      userForm: {
        username: '', // 昵称
        email: '', // 邮箱
        role_id: '' // 角色
      },
      page: 1, // 页码 默认为1
      limit: 2, // 页尺寸 默认为10
      total: 0, // 总条数
      userList: [], // 用户列表
      mode: 'add' // 模式
    }
  }
  created() {
    this.getUserListData()
  }
  // 获取用户列表
  async getUserListData() {
    const res = await getUserList({
      ...this.userForm,
      page: this.page,
      limit: this.limit
    })

    if (res.data.code === 200) {
      this.userList = res.data.data.items
      this.total = res.data.data.pagination.total
    }
  }
  // 搜索
  search() {
    this.page = 1
    this.getUserListData()
  }
  // 清除
  clear() {
    ;(this.$refs.userFormRef as any).resetFields()

    this.search()
  }
  // 页容量改变
  handleSizeChange(size: number) {
    this.limit = size

    this.search()
  }
  // 页码改变
  handleCurrentChange(page: number) {
    this.page = page

    this.getUserListData()
  }
  // 更改状态
  async changeStatus(id: string) {
    const res = await changeUserStataus({ id })

    if (res.data.code === 200) {
      this.$message.success('更改状态成功~')
      this.search()
    }
  }
  // 新增
  add() {
    this.mode = 'add'
    ;(this.$refs.userEditRef as any).userForm = {
      username: '', // 用户名
      email: '', // 邮箱
      phone: '', // 电话
      role_id: '', // 角色
      status: '', // 状态
      remark: '' // 用户备注
    }
    ;(this.$refs.userEditRef as any).dialogVisible = true
  }
  // 修改
  edit(data: any) {
    this.mode = 'edit'
    ;(this.$refs.userEditRef as any).userForm = JSON.parse(JSON.stringify(data))
    ;(this.$refs.userEditRef as any).dialogVisible = true
  }
  // 删除
  delUser(id: string) {
    this.$confirm('确定删除该条记录吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(async () => {
        const res = await deleteUser({
          id
        })

        if (res.data.code === 200) {
          this.$message.success('删除成功~')
          this.search()
        }
      })
      .catch(err => {
        console.log(err)
      })
  }
}
</script>

<style lang="scss">
.user {
  .pagination {
    padding-top: 20px;
    text-align: center;
  }
}
</style>
